<template>
  <div class="wrap">
    <div class="header">
      <div class="left">
        <el-select
          v-model="queryParams.shop"
          placeholder="请选择"
          size="small"
          class="header-select"
        >
          <el-option label="全部店铺" value=""></el-option>
          <el-option label="多个用户" :value="1"></el-option>
          <el-option label="一个用户" :value="2"></el-option>
        </el-select>

        <div style="display: inline-block;">
          <el-input size="small" style="width: 200px" v-model="queryParams.keyword" placeholder="搜索 店铺或用户名"></el-input>
          <el-button size="small" type="primary">搜索</el-button>
        </div>
      </div>
      <div class="right">
        <el-button size="small" type="primary" @click="editAdmin()">添加运营</el-button>
      </div>

    </div>
    <div class="content">
      <el-table
        v-loading="loading"
        :data="data"
        border
      >
        <el-table-column
          prop="name"
          label="运营"
          align="center"
          min-width="120"
        >
          <template slot-scope="{row}">
            店铺名（用户名）
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNum"
          label="代贴单总量"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="stickNum"
          label="店铺/用户"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="stockNum"
          label="添加时间"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="money"
          label="状态"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          min-width="100"
        >
          <template slot-scope="{row}">
            <diy-link @click="editAdmin(row)">修改</diy-link>
            <diy-link @click="jumpAdminOp(row)">操作记录</diy-link>
          </template>
        </el-table-column>

      </el-table>
      <div class="page-wrap">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="count"
          @current-change="getData"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      :visible.sync="dialogEdit"
      width="600px"
      :title="currentForm.id ? '修改' : '添加'"
    >
      <el-form
        :form="currentForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item
          label="用户名"
          prop="account"
        >
          <el-input v-model="currentForm.account"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input v-model="currentForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item
          label="用户权限"
          prop="shops"
        >
          <el-checkbox-group
            v-model="currentForm.shops"
            @change="checkGroup"
          >
            <el-checkbox label="*">全部</el-checkbox>
            <el-checkbox
              :disabled="currentForm.shops.indexOf('*') !== -1"
              v-for="item in shopsOptions"
              :key="item.value"
              :label="item.value"
            >{{item.label}}</el-checkbox>
          </el-checkbox-group>
          <div>
            <span style="font-size: 14px;color: #FF0000;">此处全选代表以后新增的所有用户都会自动赋予当前运营权限。如不需此形式，请勿勾选全选</span>
          </div>
        </el-form-item>
        <el-form-item
          label="状态"
          prop="status"
        >
          <el-radio-group v-model="currentForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">停止合作</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="submitForm()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
import {deepCopy} from "@/utils";

export default {
  name: "adminList",
  data(){
    return {
      queryParams:{
        page: 1,
        pageSize: 20,
        shop: '',
        keyword: '',
      },
      data:[],
      count:0,
      currentForm: {
        id: '',
        account: '',
        name: '',
        password: '',
        shops: [],
        status: 1,
      },
      shopsOptions:[
        {value:1,label:'店铺1'},
        {value:2,label:'店铺2'},
      ],
      isEdit : false, // 用于判断添加还是编辑
      dialogEdit: false,
      rules:{
        account: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入6位以上的密码', trigger: 'blur',min:6}
        ],
        status: [
          {required: true, message: '请选择状态', trigger: 'blur'}
        ],
      },
    }
  },
  created() {
    this.getData()
  },

  methods:{
    getData(){
      this.data = [{
        id: '',
        account: '',
        name: '',
        password: '',
        shops: [],
        status: 1,
      }];
    },
    // 编辑运营
    editAdmin(row = null){
      this.isEdit = !!row
      this.dialogEdit = true
      this.currentForm = deepCopy(row)
    },
    // 保存
    submitForm(){

    },
    // 店铺权限
    checkGroup(){
      if(this.currentForm.shops.indexOf('*') !== -1){
        this.currentForm.shops = ['*']
      }
    },
    jumpAdminOp(){
      this.$router.push({
        name: 'adminOplog'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
}
.header-select{
  margin-right: 20px;
}
</style>
